<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>账户管理界面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" th:href="@{/myconfig/layui/css/layui.css}" media="all">
    <link rel="stylesheet" type="text/css" th:href="@{/common/bootstrap/css/bootstrap.css}" media="all">
    <link rel="stylesheet" type="text/css" th:href="@{/common/global.css}" media="all">
    <link rel="stylesheet" type="text/css" th:href="@{/css/personal.css}" media="all">
    <style>
        .toolbar-label {
            text-align: center;
            width: auto;
            margin: auto 3px;
            font-weight: normal;
        }
    </style>
</head>
<body>
<script type="text/html" id="toolbarDemo">
    <button data-method="viewDetails" class="layui-btn  layui-btn-sm layui-btn-normal toolbar-btn"
            shiro:hasPermission="user_viewDetails">查看详情
    </button>
    <button data-method="modifyInfo" class="layui-btn layui-btn-sm  toolbar-btn" shiro:hasPermission="user_modifyInfo">
        修改资料
    </button>
    <button data-method="updateStatus" class="layui-btn layui-btn-sm layui-btn-warm toolbar-btn"
            shiro:hasPermission="user_updateUserStatus">修改状态
    </button>
    <button data-method="updatePass" class="layui-btn layui-btn-sm layui-btn-normal toolbar-btn"
            shiro:hasPermission="user_updatePass">修改密码
    </button>
    <button data-method="distributionDepartment" class="layui-btn layui-btn-sm toolbar-btn"
            shiro:hasPermission="user_updateDepartment">分配部门
    </button>
    <button data-method="setRole" class="layui-btn layui-btn-sm layui-btn-warm toolbar-btn"
            shiro:hasPermission="role_setRole">指定角色
    </button>
    <button data-method="deleteUser" class="layui-btn layui-btn-sm layui-btn-danger toolbar-btn"
            shiro:hasPermission="user_deleteUser">删除
    </button>
    <label class="toolbar-label">用户名</label>
    <div class="layui-input-inline" style="width: 80px">
        <input type="text" name="userName" placeholder="用户名" autocomplete="off" class="layui-input">
    </div>
    <label class="toolbar-label">电话号码</label>
    <div class="layui-input-inline" style="width: 120px">
        <input type="number" name="userPhone" placeholder="电话号码"
               autocomplete="off" class="layui-input">
    </div>
    <label class="toolbar-label">部门名称</label>
    <div class="layui-input-inline" style="width: 100px">
        <input type="text" name="departmen.departmentName" placeholder="部门名称"
               autocomplete="off" class="layui-input">
    </div>
    <button lay-submit lay-filter="*" class="layui-btn  layui-btn-sm layui-btn-normal" style="margin-left: 10px">搜索
    </button>
</script>
<table id="userList"></table>

<script type="text/javascript" th:src="@{/myconfig/layui/layui.js}" src="myconfig/layui/layui.js"
        charset="utf-8"></script>
<!-- 获取根路径 -->
<script th:replace="fragscript :: basePath"></script>
<script type="text/javascript" th:inline="none">
    var reload = false;

    function needReload() {
        reload = true;
    }

    layui.use(['table', 'layer', 'form', 'jquery', 'laypage'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;
        var userListUrl = "/user/listUser"
        var updatePassUrl = "/user/updatePass/";
        var updateDepartmentUrl = '/user/updateDepartment/';
        var updateUserStatusUrl = '/user/updateUserStatus/';
        var deleteUserUrl = '/user/deleteUser/';
        var viewDetailsUrl = '/user/viewDetails/';
        var modifyInfoUrl = '/user/modifyInfo/';
        var setRoleUrl = '/role/setRole/';
        var userId; //当前选中数据id
        var searchData; //搜索的数据

        //展示已知数据
        table.render({
            elem: '#userList'
            , url: basePath + userListUrl //数据接口
            , toolbar: '#toolbarDemo'
            , defaultToolbar: null
            , cols: [[ //标题栏
                {type: 'radio', fixed: 'left'},
                {field: 'userId', title: '#', sort: true, width: 100},
                {field: 'userName', title: '用户名',},
                {field: 'userLoginName', title: '登录名称'},
                {field: 'userPhone', title: '电话号码'},
                {
                    field: 'userStatus', title: '用户状态', templet: function (d) {
                        if (d.userStatus == null) {
                            return "地区为空";
                        }
                        return d.userStatus.userStatusName + "";
                    }
                },
                {
                    field: 'area', title: '地区', templet: function (d) {
                        return d.area.areaName + "";
                    }
                },
                {
                    field: 'department', title: '部门', templet: function (d) {
                        if (d.department == null) {
                            return "暂未分配部门";
                        }
                        return d.department.departmentName;
                    }
                },
            ]]
            , page: true //开启分页
            , limits: [3, 4, 5, 6, 7, 8]
            , limit: 5
        });


        //触发事件
        var active = {
            viewDetails: function () {
                var index = layer.open({
                    type: 2
                    , title: '查看详情'
                    , area: ['600px', '400px']
                    , content: basePath + viewDetailsUrl + userId
                });
            }, modifyInfo: function () {
                layer.open({
                    type: 2
                    , title: '修改信息'
                    , area: ['450px', '340px']
                    , content: basePath + modifyInfoUrl + userId
                    , end: function () {
                        if (reload) {
                            reloadTable();
                        }
                    }
                });
            }, updateStatus: function () {
                layer.open({
                    type: 2
                    , title: '修改状态'
                    , area: ['450px', '300px']
                    , content: basePath + updateUserStatusUrl + userId
                    , end: function () {
                        if (reload) {
                            reloadTable();
                        }
                    }
                });
            }, updatePass: function () {
                layer.open({
                    type: 2
                    , title: '修改密码'
                    , area: ['420px', '300px']
                    , content: basePath + updatePassUrl + userId
                });
            }, distributionDepartment: function () {
                layer.open({
                    type: 2
                    , title: '分配部门'
                    , area: ['450px', '300px']
                    , content: basePath + updateDepartmentUrl + userId
                    , end: function () {
                        if (reload) {
                            reloadTable();
                        }
                    }
                });
            }, setRole: function () {
                var index = layer.open({
                    type: 2
                    , title: '指定角色'
                    , area: ['450px', '450px']
                    , content: basePath + setRoleUrl + userId
                });
            }, deleteUser: function () {
                layer.confirm('确认删除?', function (index) {
                    deleteUser();
                    layer.close(index);
                });
            }
        };

        $("body").on('click', '.toolbar-btn', function () {
            var othis = $(this), method = othis.data('method');
            var checkStatus = table.checkStatus("userList");
            if (checkStatus.data.length == 0) {
                layer.msg("还未选中用户");
                return;
            }
            userId = table.checkStatus("userList").data[0].userId;
            active[method] ? active[method].call(this, othis) : '';
        });

        function deleteUser() {
            $.ajax({
                url: basePath + deleteUserUrl + userId,
                type: 'delete',
                dataType: 'json',
                success: function (result) {
                    if (result.code == 0) {
                        reloadTable();
                    }
                    layer.msg(result.message);
                }
            })
        }

        form.on('submit(*)', function (data) {
            searchData = data.field;
            reloadTable();
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //重载表格
        function reloadTable() {
            table.reload('userList', {
                where: searchData
            });
            var form_filter = $("div[lay-id='userList']").attr("lay-filter");
            console.log(form_filter);
            form.val(form_filter, searchData);
        }

    });
</script>
</body>
</html>